<template>
  <div id="user-list" class="cool-card">
    <el-row>
      <div class="search-section">
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="角色:">
            <!--<el-input size="small" v-model="searchForm.appName" placeholder="审批人"></el-input>-->
            <el-select v-model="searchForm.roleId" size="small" filterable placeholder="请选择一个角色">
              <el-option
                v-for="role in roles"
                :key="role.id"
                :label="role.name"
                :value="role.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户ID:">
            <el-input size="small" v-model="searchForm.principalId" placeholder="请输入精确的用户ID"></el-input>
          </el-form-item>
          <el-form-item label="用户昵称:">
            <el-input size="small" style="width: 220px;" v-model="searchForm.nickname"
                      placeholder="请输入用户昵称，支持模糊查询"></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱:">
            <el-input size="small" v-model="searchForm.email" placeholder="请输入精确的用户邮箱"></el-input>
          </el-form-item>
          <el-form-item label="手机号:">
            <el-input size="small" v-model="searchForm.mobile" placeholder="请输入精确的用户手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
              <el-button size="mini" type="primary" @click="addUserDialogVisible = true">新增</el-button>
              <el-button type="primary" size="mini" @click="onRefresh">刷新</el-button>
            </el-button-group>
          </el-form-item>
        </el-form>
      </div>
    </el-row>
    <el-row>
      <el-card>
        <el-table v-loading="loadingTable"
                  :data="userList"
                  size="small"
                  row-key="userPrincipal.id"
                  @sort-change="onSortChange"
                  ref="userList"
                  class="actions-table">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left">
                <el-row>
                  <el-col :span="6">
                    <h5>用户身份信息</h5>
                    <span>用户ID:{{props.row.userPrincipal.id}}</span><br>
                    <span>AuthType:{{props.row.userPrincipal.authType}}</span><br>
                    <span>唯一标识:{{props.row.userPrincipal.identifier}}</span><br>
                    <span>账户未过期:{{props.row.userPrincipal.accountNonExpired}}</span><br>
                    <span>密码未过期:{{props.row.userPrincipal.credentialsNonExpired}}</span><br>
                    <span>账户未锁定:{{props.row.userPrincipal.accountNonLocked}}</span><br>
                    <span>账户可用:{{props.row.userPrincipal.enable}}</span><br>
                    <span>创建人:{{props.row.userPrincipal.createUserId}}</span><br>
                    <span>更新人:{{props.row.userPrincipal.updateUserId}}</span><br>
                    <span>更新时间:{{props.row.userPrincipal.updateTime | dateFormatMin}}</span><br>
                    <span>最近登录时间:{{props.row.userPrincipal.lastLoginTime | dateFormatMin}}</span><br>

                  </el-col>
                  <el-col :span="6">
                    <h5>用户画像信息</h5>
                    <template v-if="props.row.userProfile">
                      <span>关联ID:{{props.row.userProfile.id}}</span><br>
                      <span>用户昵称:{{props.row.userProfile.nickname}}</span><br>
                      <span></span><a :href="props.row.userProfile.avatarPath" target="_blank">用户头像</a><br>
                      <span>性别:{{props.row.userProfile.sex}}</span><br>
                      <span>国家:{{props.row.userProfile.country}}</span><br>
                      <span>省份:{{props.row.userProfile.province}}</span><br>
                      <span>城市:{{props.row.userProfile.city}}</span><br>
                      <span>标记信息:{{props.row.userProfile.remark}}</span><br>
                      <span>订阅状态:{{props.row.userProfile.subscribe}}</span><br>
                      <span>订阅时间:{{props.row.userProfile.subscribeTime | dateFormatMin}}</span><br>
                    </template>
                  </el-col>
                  <el-col :span="6">
                    <h5>用户第三方账户绑定信息</h5>
                    <template v-if="props.row.userBindAccount">
                      <span>关联ID:{{props.row.userBindAccount.id}}</span><br>
                      <span>微信公众号ID:{{props.row.userBindAccount.wxMpOpenId}}</span><br>
                      <span>微信小程序ID:{{props.row.userBindAccount.wxAppletOpenId}}</span><br>
                      <span>微信开放平台ID:{{props.row.userBindAccount.wxUnionId}}</span><br>
                      <span>微信网站应用ID:{{props.row.userBindAccount.wxWebappOpenId}}</span><br>
                      <span>微博ID:{{props.row.userBindAccount.weiboOpenId}}</span><br>
                      <span>QQ_ID:{{props.row.userBindAccount.qqOpenId}}</span><br>
                      <span>邮件:{{props.row.userBindAccount.emailAddress}}</span><br>
                      <span>手机号:{{props.row.userBindAccount.phoneNumber}}</span><br>
                      <span>更新时间:{{props.row.userBindAccount.updateTime | dateFormatMin}}</span><br>
                    </template>

                  </el-col>
                  <el-col :span="6">
                    <h5>用户角色信息</h5>
                    <div v-for="role in props.row.userRoles">
                      <span>关联ID:{{role.id}}</span><br>
                      <span>角色ID:{{role.roleId}}</span><br>
                      <span>角色名称:{{role.roleName}}</span><br>
                      <span>角色代码:{{role.roleCode}}</span><br>
                      <span>绑定时间:{{role.createTime | dateFormatMin}}</span><br>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column align="center" label="ID" prop="userPrincipal.id" width="120">

          </el-table-column>
          <el-table-column align="center" label="昵称" prop="userProfile.nickname" width="120">

          </el-table-column>
          <el-table-column align="center" label="头像" prop="userProfile.avatarPath" width="80">
            <template slot-scope="scope">
              <el-image style="width: 50px; height: 50px;"
                        :src="scope.row.userProfile.avatarPath"
                        fit="contain"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="账户角色" width="120">
            <template slot-scope="scope">
              <span v-for="role in scope.row.userRoles">
                {{role.roleName}}<br>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态账户" prop="userProfile.nickname" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.userPrincipal.accountNonExpired == true && scope.row.userPrincipal.accountNonLocked == true &&
              scope.row.userPrincipal.credentialsNonExpired == true && scope.row.userPrincipal.enable == true">
                正常
              </span>
              <span style="color: red;font-weight: bolder;" v-else>异常</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="登录方式" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.userPrincipal.authType == 'THIRD_ACCOUNT'">第三方登录</span>
              <span v-else>密码登录</span>
            </template>
          </el-table-column>
          <el-table-column sortable="custom" align="center" prop="createTime" label="创建时间">
            <template slot-scope="scope">
              {{scope.row.userPrincipal.createTime | dateFormatMin}}
            </template>
          </el-table-column>
          <el-table-column sortable="custom" align="center" prop="lastLoginTime" label="最近登录时间">
            <template slot-scope="scope">
              {{scope.row.userPrincipal.lastLoginTime | dateFormatMin}}
            </template>
          </el-table-column>
          <el-table-column sortable="custom" align="center" prop="remark" show-overflow-tooltip label="用户标记">
            <template slot-scope="scope">
              {{scope.row.userProfile.remark}}
            </template>
          </el-table-column>
          <el-table-column align="center" width="180px" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-dropdown split-button type="danger"
                           size="small" @command="(command)=>{onCommand(command,scope.row)}">
                <span>操作</span>
                <!--<el-button type="primary" size="small">-->
                <!--操作<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                <!--</el-button>-->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="scope.row.userPrincipal.enable == true" command="disableUser">禁用账户
                  </el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.userPrincipal.enable == false" command="activeUser">启用账户
                  </el-dropdown-item>
                  <el-dropdown-item command="modifyPassword">修改密码</el-dropdown-item>
                  <el-dropdown-item command="mark">标记用户</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
    <el-row>
      <el-pagination
        class="page-section"
        background
        @current-change="onPaging"
        @size-change="handleSizeChange"
        layout="sizes,prev, pager, next"
        :total="pagingParams.total"/>
    </el-row>
  </div>
</template>

<script>
  import {getAllRoles} from "../../api/roles-api";
  import {
    activeUserAccount,
    disableUserAccount,
    getUserList,
    modifyUserPwd,
    updateUserProfile
  } from "../../api/god-api";
  import {toLine} from "../../utils/util";

  export default {
    name: "UserList",
    data() {
      return {
        loadingTable: false,
        pagingParams: {
          current: 1,
          size: 10,
          orders: '!create_time',
          total: 0,//总数量
          pages: 0,//总页数
        },
        addUserDialogVisible: false,
        roles: [],
        searchForm: {
          principalId: '',
          email: '',
          mobile: '',
          roleId: '',
          nickname: ''
        },
        userList: []
      }
    },
    methods: {
      onSortChange(params) {
        this.pagingParams.current = 1
        if (params.order) {
          let orderString = "";
          if (params.order.startsWith("d")) {
            //降序
            orderString = orderString.concat("!")
          }
          orderString = orderString.concat(toLine(params.prop));
          this.pagingParams.orders = orderString
        } else {
          this.pagingParams.orders = "!create_time";//默认排序
        }
        this.loadUsers()
      },
      onCommand(command, row) {
        console.log(row)
        if (command === 'disableUser') {
          disableUserAccount(row.userPrincipal.id).then(res => {
            this.$message.success("操作成功")
            this.loadUsers()
          })
        }
        if (command === 'activeUser') {
          activeUserAccount(row.userPrincipal.id).then(res => {
            this.$message.success("操作成功")
            this.loadUsers()
          })
        }
        if (command === 'modifyPassword') {
          this.$prompt('请输入新密码', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^[a-zA-Z0-9]{6,16}$/,
            inputErrorMessage: '密码格式不正确'
          }).then(({value}) => {
            modifyUserPwd(row.userPrincipal.id, value).then(res => {
              this.$notify.success("修改成功,新密码为:" + value)
              this.loadUsers()
            })
          }).catch(() => {

          });
        }
        if (command === 'mark') {
          //标记用户
          this.$prompt('请输入标记信息', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({value}) => {
            row.userProfile.remark = value
            updateUserProfile(row.userProfile).then(res => {
              this.$message.success("操作成功")
              this.loadUsers()
            })
          }).catch(() => {

          });

        }
      },

      //页面切换
      onPaging(currentPage) {
        this.pagingParams.current = currentPage
        this.loadUsers()
      },
      handleSizeChange(val) {
        //页大小编号
        this.pagingParams.size = val
        this.loadUsers()
      },
      onSearch() {
        this.loadUsers();
      },
      onRefresh() {

        this.searchForm = {
          principalId: '',
          email: '',
          mobile: '',
          roleId: '',
          nickname: ''
        }
        this.pagingParams = {
          current: 1,
          size: 10,
          orders: '!create_time',
          total: 0,//总数量
          pages: 0,//总页数
        }
        this.loadUsers()
      },
      loadAllRoles() {
        getAllRoles().then(res => {
          this.roles = res
        })
      },
      loadUsers() {
        this.loadingTable = true
        getUserList({...this.pagingParams, ...this.searchForm}).then(res => {
          console.log(res)
          this.userList = res.records
          this.pagingParams.current = res.current
          this.pagingParams.pages = res.pages
          this.pagingParams.total = res.total
          this.loadingTable = false
        }).catch(() => {
          this.loadingTable = false
        })
      }
    },
    created() {
      this.loadAllRoles();
      this.loadUsers();
    }
  }
</script>

<style scoped>
  .page-section {
    margin-top: 10px;
    float: right;
  }

  .actions-table >>> .el-form-item {
    margin-bottom: 0px;
  }

  .actions-table >>> .el-form--inline .el-form-item {
    margin-right: 40px;
  }

  .actions-table >>> .el-form-item__label {
    /*color: #E6A23C;*/
  }

  .search-section >>> .el-form-item {
    margin-bottom: 8px;
  }
</style>
